/**
 * xiongsha
 * 预约时间
 * 2020-02-23
 * */
import React, { useState, useEffect } from 'react';
import { createForm } from 'rc-form';
import { List, InputItem, Button, Toast, Picker } from 'antd-mobile';
import moment from 'moment';
import Header from '@src/components/common/Header';
import request from '@src/utils/request';
import Title from './component/Title';
import './style.less';

const certificateType = [
  {
    label: '身份证',
    value: '1',
  },
  {
    label: '护照',
    value: '2',
  },
  {
    label: '港澳回乡证',
    value: '3',
  },
];
const groupType = [
  {
    label: '旅行社',
    value: '1',
  },
  {
    label: '研学团队',
    value: '2',
  },
  {
    label: '政府组织',
    value: '3',
  },
  {
    label: '社会组织团体',
    value: '4',
  },
];

// const startDate = moment().startOf('week').valueOf(); // 本周第一周时间戳
const today = moment().startOf('day').valueOf(); // 今天时间戳
const week: string[] = [];
const data: number[] = [];

const getDay = (day) => {
  // 获取周几
  switch (day) {
    case '1':
      return '一';
    case '2':
      return '二';
    case '3':
      return '三';
    case '4':
      return '四';
    case '5':
      return '五';
    case '6':
      return '六';
    default:
      return '日';
  }
};

for (var i = 1; i <= 7; i++) {
  // 获取本周和下周所有日期时间戳
  const weekDay = moment(today + i * 24 * 60 * 60 * 1000).format('d'); //获取周几
  week.push(getDay(weekDay));
  data.push(today + i * 24 * 60 * 60 * 1000);
}
const date: (number | string)[] = [...week, ...data]; // 合并周几和时间戳
const SubscribeTime = (props: any) => {
  const { getFieldProps, validateFields, resetFields } = props.form;
  const type = props.match.params.type;
  const [time, setTime] = useState<string>('10:00-11:00');
  const [year, setYear] = useState<number | string>(0);
  const [closeTime, setCloseTime] = useState<(number | string)[]>(['']);

  useEffect(() => {
    //   获取闭馆时间
    request('get', '/wp-json/ec-visit/v1/get_close_time').then((res) => {
      const data = res.data;
      if (data.code === 0) {
        setCloseTime(data.data);
      } else {
        Toast.fail(data.message, 1);
      }
    });
  }, []);

  const submit = () => {
    // 提交
    validateFields((err, values) => {
      if (!err) {
        if (!year) {
          Toast.fail('请选择参观日期', 1);
          return false;
        }
        const type = props.match.params.type;
        const content = { ...values };
        if (type === '1') {
          content.certificate_type = values.certificate_type[0];
        } else {
          content.group_type = values.group_type[0];
        }
        request('post', '/wp-json/ec-visit/v1/insert', {
          type,
          time,
          date: moment(year).format('YYYY-MM-DD'),
          ...content,
        }).then((res) => {
          const data = res.data;
          if (data.code === 0) {
            props.history.push(
              `/subscribe/${type === '1' ? data.data.phone : data.data.group_leader_phone}`,
            );
          } else {
            Toast.fail(data.message, 1);
          }
        });
      } else {
        for (var i in err) {
          Toast.fail(err[i].errors[0].message, 1);
          return false;
        }
      }
    });
  };

  const reset = () => {
    // 重置
    setYear(0);
    setTime('10:00-11:00');
    resetFields();
  };

  return (
    <div className="subscribeTime">
      <Header>选择参观日期和参观人信息</Header>
      <div className="content">
        <Title>选择参观日期({moment(today).format('MM')}月)</Title>
        <ul className="dateUl">
          {date.map((cur, index) => {
            if (index <= 6) {
              return (
                <li key={`${cur}-${index}`} className="dateLi">
                  {cur}
                </li>
              );
            }
            if (closeTime.indexOf(cur) !== -1 || moment(cur).day() === 1) {
              return (
                <li key={`${cur}-${index}`} className="dateLi disableLi">
                  闭馆
                </li>
              );
            }
            if (cur < today) {
              // 今天以前的时间
              return (
                <li key={`${cur}-${index}`} className="dateLi disableLi">
                  {moment(cur).format('DD')}
                </li>
              );
            }

            if (cur === today) {
              return (
                <li key={`${cur}-${index}`} className="dateLi red">
                  {moment(cur).format('DD')}
                  <p>今天</p>
                </li>
              );
            }
            return (
              <li
                key={`${cur}-${index}`}
                onClick={() => {
                  setYear(cur);
                }}
                className={year === cur ? 'dateLi selectLi' : 'dateLi'}
              >
                {moment(cur).format('DD')}
              </li>
            );
          })}
        </ul>
      </div>
      <div className="content">
        <Title>选择入馆时段</Title>
        <ul className="selTime">
          <li
            className={time === '10:00-11:00' ? 'selTimeList active' : 'selTimeList'}
            onClick={() => {
              setTime('10:00-11:00');
            }}
          >
            10:00-11:00
          </li>
          <li
            className={time === '11:00-12:00' ? 'selTimeList active' : 'selTimeList'}
            onClick={() => {
              setTime('11:00-12:00');
            }}
          >
            11:00-12:00
          </li>
          <li
            className={time === '14:00-15:00' ? 'selTimeList active' : 'selTimeList'}
            onClick={() => {
              setTime('14:00-15:00');
            }}
          >
            14:00-15:00
          </li>
          <li
            className={time === '15:00-16:00' ? 'selTimeList active' : 'selTimeList'}
            onClick={() => {
              setTime('15:00-16:00');
            }}
          >
            15:00-16:00
          </li>
          <li
            className={time === '16:00-17:00' ? 'selTimeList active' : 'selTimeList'}
            onClick={() => {
              setTime('16:00-17:00');
            }}
          >
            16:00-17:00
          </li>
        </ul>
      </div>
      <div className="content">
        <Title>参观人信息</Title>
        {type === '1' ? (
          <List>
            <InputItem
              {...getFieldProps('name', {
                rules: [
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ],
              })}
              clear
              placeholder="请输入姓名"
            >
              姓名：
            </InputItem>
            <InputItem
              {...getFieldProps('phone', {
                rules: [
                  {
                    required: true,
                    message: '请输入手机号',
                  },
                ],
              })}
              clear
              type="number"
              placeholder="请输入手机号"
            >
              手机号：
            </InputItem>
            <Picker
              data={certificateType}
              cols={1}
              {...getFieldProps('certificate_type', {
                rules: [
                  {
                    required: true,
                    message: '请选择证件类型',
                  },
                ],
              })}
            >
              <List.Item arrow="horizontal">证件类型：</List.Item>
            </Picker>
            <InputItem
              {...getFieldProps('certificate', {
                rules: [
                  {
                    required: true,
                    message: '请输入证件号码',
                  },
                ],
              })}
              clear
              placeholder="请输入证件号码"
              type="number"
            >
              证件号码：
            </InputItem>
          </List>
        ) : (
          <List>
            <Picker
              data={groupType}
              cols={1}
              {...getFieldProps('group_type', {
                rules: [
                  {
                    required: true,
                    message: '请选择参观团队类别',
                  },
                ],
              })}
            >
              <List.Item arrow="horizontal">参观团队类别：</List.Item>
            </Picker>
            <InputItem
              {...getFieldProps('group_name', {
                rules: [
                  {
                    required: true,
                    message: '请输入参观团体名称',
                  },
                ],
              })}
              clear
              placeholder="请输入参观团体名称"
            >
              参观团体名称：
            </InputItem>
            <InputItem
              {...getFieldProps('group_leader_name')}
              clear
              type="text"
              placeholder="请输入联系人姓名"
            >
              联系人姓名：
            </InputItem>
            <InputItem
              {...getFieldProps('group_leader_phone')}
              clear
              placeholder="请输入联系人电话"
              type="number"
            >
              联系人电话：
            </InputItem>
            <InputItem
              {...getFieldProps('group_num')}
              clear
              placeholder="请输入 参观人数"
              type="number"
            >
              参观人数：
            </InputItem>
          </List>
        )}
      </div>
      <Button type="primary" onClick={submit} className="save">
        提交
      </Button>
      <Button type="ghost" onClick={reset} className="reset">
        重置
      </Button>
    </div>
  );
};

const SubscribeTimeForm = createForm()(SubscribeTime);
export default SubscribeTimeForm;
